<template>
    <div class='root'>
        <div class='cate-item' @click='cateClick'>
            <img :src="cateItem.game_icon" alt="">
            <h6>{{cateItem.game_name}}</h6>
        </div>   
    </div>
</template>
<script>
    export default{
        props:['cateItem'],
        methods:{
            cateClick:function(){
                /*
                url的hash路径中，可以通过:的形式添加路径参数，路径中的参数会传递给跳转页面，
                */
                location.href = '#/category/'
                +this.cateItem.game_name+'/'
                +this.cateItem.cate_id
            }
        }
    }
</script>
<style scoped>
    .root{
        box-sizing: border-box;
        width: 33.3%;
        height: 13rem;
        text-align: center;
        border: 1px solid darkgrey;
        position: relative;
    }
    .cate-item{
        width:100%;
    }
    img{
        width: 8rem;
        border-radius: 50%;
        margin-top: 1rem;
    }
    h6{
        height: 20%;
        margin: 0;
        padding: 0.5rem 0;
        color:#666666;
        font-size: 1.8rem;
        font-weight: normal;
    }
</style>